/**
 * 设计令牌 - 统一的设计系统配置
 * 确保所有组件使用一致的样式规范
 */

// Z-Index 层级系统
export const zIndex = {
  dropdown: 1000,
  sticky: 1020,
  fixed: 1030,
  modalBackdrop: 1040,
  modal: 1050,
  popover: 1060,
  tooltip: 1070,
  toast: 1080,
  loading: 1090,
} as const;

// 动画时长
export const duration = {
  fastest: 100,
  fast: 200,
  normal: 300,
  slow: 400,
  slowest: 500,
} as const;

// 缓动函数 - CSS 字符串格式
export const easing = {
  // 标准缓动
  ease: 'cubic-bezier(0.4, 0, 0.2, 1)',
  // 进入缓动
  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
  // 离开缓动
  easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
  // 进入-离开缓动
  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
  // 弹性缓动
  spring: 'cubic-bezier(0.25, 1, 0.5, 1)',
  // 诗意缓动
  poetic: 'cubic-bezier(0.23, 1, 0.32, 1)',
} as const;

// 缓动函数 - Framer Motion 数组格式
export const motionEasing = {
  // 标准缓动
  ease: [0.4, 0, 0.2, 1],
  // 进入缓动
  easeIn: [0.4, 0, 1, 1],
  // 离开缓动
  easeOut: [0, 0, 0.2, 1],
  // 进入-离开缓动
  easeInOut: [0.4, 0, 0.2, 1],
  // 弹性缓动
  spring: [0.25, 1, 0.5, 1],
  // 诗意缓动
  poetic: [0.23, 1, 0.32, 1],
} as const;

// 圆角
export const radius = {
  none: '0',
  xs: '4px',
  sm: '6px',
  md: '8px',
  lg: '12px',
  xl: '16px',
  '2xl': '20px',
  full: '9999px',
} as const;

// 间距
export const spacing = {
  '0': '0',
  '1': '0.25rem', // 4px
  '2': '0.5rem', // 8px
  '3': '0.75rem', // 12px
  '4': '1rem', // 16px
  '5': '1.25rem', // 20px
  '6': '1.5rem', // 24px
  '8': '2rem', // 32px
  '10': '2.5rem', // 40px
  '12': '3rem', // 48px
  '16': '4rem', // 64px
} as const;

// 阴影
export const shadow = {
  none: 'none',
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
} as const;

// 导出所有设计令牌
export const designTokens = {
  zIndex,
  duration,
  easing,
  motionEasing,
  radius,
  spacing,
  shadow,
} as const;

export default designTokens;

